<template>

    <el-dialog v-model="dialogVisible" :title="title" width="500">
        <el-form :model="formItem" label-width="auto">
            <el-form-item label="等级名称 :">
                <el-input v-model="formItem.name" />
            </el-form-item>
            <el-form-item label="等级 :">
                <el-input v-model="formItem.grade" />
            </el-form-item>
            <el-form-item label="享受折扣 :">
                <el-input v-model="formItem.discount" />
            </el-form-item>
            <el-form-item label="解锁经验值 :">
                <el-input v-model="formItem.exp" />
            </el-form-item>
            <el-form-item label="是否显示 :">
                <el-radio-group v-model="formItem.is_show">
                    <el-radio :value="1">显示</el-radio>
                    <el-radio :value="0">隐藏</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="图标 :">
                <!-- import.meta.env.VITE_BASE_URL http://nocat.life:3011/image/upload -->
                <el-upload class="avatar-uploader" :action="`${baseURL}/image/upload`" :show-file-list="false"
                    :on-success="handleAvatarSuccess">
                    <img v-if="formItem.icon" :src="formItem.icon" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Picture />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item label="用户背景图 :">
                <el-upload class="avatar-uploader" :action="`${baseURL}/image/upload`" :show-file-list="false"
                    :on-success="handBgSuccess">
                    <img v-if="formItem.bg_image" :src="formItem.bg_image" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Picture />
                    </el-icon>
                </el-upload>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="onConfirm()">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { addUserLevelApi, getUserGradeByIdApi, updateUserLevelApi, type userLevelItemLimit } from '@/api/userLevel';
import { computed, ref, watch } from 'vue';
const dialogVisible = ref(false);
import { Picture } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
const emit = defineEmits(['getUserLevel']);
const formItem = ref<userLevelItemLimit>({
    _id: '',
    is_show: 1,
    name: '', grade: '',
    discount: '',
    exp: ''
})
const title = computed(() => {
    if (formItem.value._id) {
        return '编辑用户等级'
    }
    return '添加用户等级'
})
const baseURL = import.meta.env.VITE_BASE_URL;

watch(dialogVisible, () => {
    if (dialogVisible.value) {
        getUserLevelById();
    }
});

//上传图片完成后接受返回的请求参数并赋值给formItem达到回显
const handleAvatarSuccess: UploadProps['onSuccess'] = (
    res,
) => {
    formItem.value.icon = res.data;

};
const handBgSuccess: UploadProps['onSuccess'] = (
    res,
) => {
    formItem.value.bg_image = res.data;

};

function onConfirm() {

    if (formItem.value._id) {
        updateUserLevel()
    } else {
        addUserLevel();
    }
    emit('getUserLevel');
    dialogVisible.value = false;

}

function addUserLevel() {
    addUserLevelApi(formItem.value).then((res) => {
        if (res.code == 200) {
            ElMessage({
                type: 'success',
                message: '添加成功',
            })
        } else {
            ElMessage.error(res.message);
        }
    })
}



function updateUserLevel() {
    updateUserLevelApi(formItem.value).then(res => {
        if (res.code == 200) {
            ElMessage({
                type: 'success',
                message: '修改成功',
            })
        } else {
            ElMessage.error(res.message);
        }
    })
}

function getUserLevelById() {
    getUserGradeByIdApi({
        _id: formItem.value._id
    }).then((res: any) => {
        if (res.code == 200) {
            formItem.value = res.data;
        }
    })
}

function openDialogVisible(_id: string) {
    // 如果父组件传递了_id，说明要做修改
    if (_id) {
        formItem.value._id = _id;
    } else {
        formItem.value = { is_show: 1, name: '', grade: '', discount: '', exp: '' }
    }

    dialogVisible.value = true;
}

defineExpose({ openDialogVisible })
</script>

<style scoped>
.avatar-uploader .avatar {
    width: 60px;
    height: 60px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px solid var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}



.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 60px;
    height: 60px;
    text-align: center;
}
</style>